<!--  -->
<template>
  <a-modal
    @cancel="modalClose"
    :visible="readBroadModalVisible.visible"
    width="800px"
    wrapClassName="readbroad-modal"
    :zIndex="1040"
    :centered="true"
    :footer="null"
  >
    <div class="read-main-wrap">
      <p class="read-mainidea-title">文章梗概</p>
      <div v-html="readBroadModalVisible.mainidea"></div>
    </div>
  </a-modal>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Modal } from "ant-design-vue";
export default {
  components: {
    AModal: Modal,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      readBroadModalVisible: (state) => state.readBroadModalVisible,
    }),
  },
  watch: {
    readBroadModalVisible: function(val) {
      console.log(val);
    },
  },
  methods: {
    ...mapMutations(["setReadBroadModal"]),
    modalClose() {
      this.setReadBroadModal({
        visible: false,
      });
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.readbroad-modal {
  .read-main-wrap {
    padding: 10px 20px;
    height: calc(100vh - 200px);
    overflow-y: auto;
    .read-mainidea-title {
      font-size: 24px;
      color: #333;
      font-weight: 700;
      text-align: center;
    }
  }
}
</style>
